<template>
     <div class="search-box">
       <div class="start-time">
        <span class="titles">日期:</span>
          <el-date-picker style="width: 200px" v-model="timeValue" type="daterange" range-separator="至"
              start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD" @change="timeChoose" />
       </div>
       <div class="timeType">
        <span class="titles">期别:</span>
        <el-select v-model="formData.val" class="m-2" placeholder="请选择">
         <el-option
          v-for="item in timeType"
          :key="item"
          :label="item"
          :value="item"
         />
       </el-select>
       </div>
       <div class="types">
        <span class="titles">状态:</span>
        <el-select v-model="formData.rState" class="m-2" placeholder="请选择"   >
         <el-option
          v-for="item in typeList"
          :key="item.Rstate"
          :label="item.name"
          :value="item.Rstate"
         />
       </el-select>
       </div>
       <div>
        <el-button type="info" @click="clearSearch">刷新重置</el-button>
        <el-button type="danger" @click="handleClose">搜索</el-button>
     </div>
     </div>
     
  </template>
  <script lang="ts" setup>
  import { ref,watch} from "vue"
  import {useRouter} from 'vue-router'
  const router = useRouter()
  const userType=ref(JSON.parse(sessionStorage.getItem('userInfo')).userRole)
  const timeType = ref([])
  const typeList = ref([
     {
        name:'未上报',
        Rstate:'1',
        type:['3']
     },
     {
        name:'未审批',
        Rstate:'2',
        type:['1','2','3']
     },
     {
        name:'已审批',
        Rstate:'5',
        type:['1','2','3']
     },
     {
        name:'未上报查看',
        Rstate:'1',
        type:['1']
     }
  ])
  //级别筛选
  typeList.value=typeList.value.filter(v=>v.type.includes(userType.value))
  const timeValue = ref([]) 
  const formData = ref({
       reportTimeStart:'',
       reportTimeEnd:'',
       val:'',//期别
       rState:''
  })
  const emit = defineEmits(['inputChange'])
  const props = defineProps({
      tableArray:Array
  })
  watch(
    ()=>router,
    (newValue:any)=>{
       formData.value ={
       reportTimeStart:'',
       reportTimeEnd:'',
       val:'',//期别
       rState:''
     }
    },
    {deep:true}
    )
  watch(
    ()=>props.tableArray,
    (newValue:any)=>{
        timeType.value=[]
        timeType.value=newValue
    },
    {deep:true}
    )
  const timeChoose =()=>{
  if (timeValue.value == null) {
    formData.value.reportTimeStart = '';
    formData.value.reportTimeEnd = '';
  } else {
    formData.value.reportTimeStart = timeValue.value[0];
    formData.value.reportTimeEnd = timeValue.value[1];
  }
  }
   //传送值给父级
const handleClose = () => {
    emit('inputChange', formData.value)
  }
  //清空搜索
  const clearSearch=()=>{
   formData.value = {
      reportTimeStart:'',
       reportTimeEnd:'',
       val:'',//期别
       rState:''
    }
    handleClose()
  }
  </script>
  <style scoped>
 .search-box{
    display: flex;
    margin-bottom: 20px;
    justify-content: space-around;
    align-items: center;
 }

 .titles{
    margin-right: 10px;
 }
</style>
  